<template>
  <div class="booktop">
    <h1>
      <span>书单</span>
      <span>
        <router-link to="/HotBooks">
        <em>全部书单</em>
        <b class="iconfont icon-24gl-arrowRight2"></b>
        </router-link>
      </span>
    </h1>
    <ul class="booktopul">
      <li v-for="arr1 in arr" :key="arr1.title" class="booktopli" :style="{backgroundImage:'url('+arr1.img+')',backgroundColor:arr1.color}">
        <p>{{ arr1.title }}</p>
        <p>{{ arr1.text }}</p>
        <p>{{ arr1.name }}</p>
        <p>{{ arr1.jie }}</p>
        <img :src="'../assets/img/' + arr1.url" class="booktop-pic" />
      </li>
      <li class="quanbu">
        <p class="quanbu-p1">
          <span>看全部书单</span>
          <i class="iconfont icon-24gl-arrowRight2"></i>
        </p>
        <b class="quanbu-p2">304个</b>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Booktop",
  props: {},
  data() {
    return {
      arr: [],
    };
  },
  created() {
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/arr", true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        this.arr = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  },
};
</script>
<style scoped>
.booktop .booktopul .quanbu{
  text-align: center;
  background-color: rgb(236, 228, 188);
  border-radius: 0.1rem;
  margin-right: .1rem;
}
.booktop .booktopul .quanbu .quanbu-p1{
  font-size: 16px;
  font-weight: 700;
  padding-top: .4rem;
  color: black;
}
.booktop .booktopul .quanbu .quanbu-p2{
color: black;
}
.booktop {
  height: 2.4rem;
  margin-bottom: 0.2rem;
}
.booktop h1 {
  height: 0.5rem;
  line-height: 0.5rem;
}
.booktop h1 span:nth-child(1) {
  font-size: 24px;
  font-weight: 700;
  float: left;
  padding-left: 0.1rem;
}
.booktop h1 span:nth-child(2) {
  height: 0.5rem;
  color: #666;
  float: right;
  padding-right: 0.1rem;
}
.booktop h1 span:nth-child(2) .iconfont{
  font-weight: 700;
}
.booktop .booktopul {
  height: 1.9rem;
  display: flex;
  overflow-x: auto;
}
.booktopul .booktopli {
  position: relative;
  height: 100%;
  border-radius: 0.1rem;
  width: 1.2rem;
  float: left;
  background-repeat: no-repeat;
  background-size: 1.2rem .6rem;
  background-position:0 1.2rem;
  flex-shrink: 0;
  margin-right: 0.05rem;
}
.booktop .booktopul li p {
  padding: 0 0.05rem;
  color: white;
}
.booktop .booktopul li p:nth-child(1) {
  font-size: 16px;
  margin: 0.15rem 0;
  width: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只显示3行*/
  -webkit-box-orient: vertical;
}
.booktop .booktopul li p:nth-child(2) {
  font-size: 12px;
  margin-bottom: 0.1rem;
}
.booktop .booktopul li p:nth-child(3) {
    width: .6rem;
  z-index: 1;
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  margin-left: -0.2rem;
  font-size: 16px;
  margin-bottom: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booktop .booktopul li p:nth-child(4) {
  z-index: 1;
  position: absolute;
  bottom: 0.15rem;
  left: 50%;
  margin-left: -0.2rem;
  font-size: 12px;
  color: #fff;
}
.booktop-pic {
  opacity: 0.7;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  margin-left: -0.5rem;
}
</style>